Introduction

QuickChart is a web service that generates chart images on-the-fly. These images are suitable for embedding in email, SMS, chatbots, and other formats. Charts are rendered by Chart.js, a popular open-source charting library.

Getting started

QuickChart works by taking Chart.js configurations and rendering them as images. You may send your chart configuration in JSON or Javascript format using a simple URL or through POST request.

For example, take this simple Chart.js configuration:

{
  type: 'bar',                                // Show a bar chart
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],   // Set X-axis labels
    datasets: [{
      label: 'Users',                         // Create the 'Users' dataset
      data: [120, 60, 50, 180, 120]           // Add data to the chart
    }]
  }
}

We'll pack the Chart.js object into the /chart URL endpoint:

https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015, 2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}

The URL generates this chart image, a rendering of the Chart.js config above:

Loading...

Try making adjustments to the example above!

1. Edit the chart and replacing bar with line or pie to get a different type of chart.
2. Change the legend labels.
3. Add another dataset to get a grouped bar chart.

Because QuickChart is built on open-source chart libraries, our charts are flexible and highly customizable. Keep on reading to learn more or view more chart examples.

Using the API

The https://quickchart.io/chart endpoint supports both GET and POST methods. These parameters provide control over dimensions, resolution, background, and Chart.js version of your chart:

Parameter	Type	Description
chart	string	Chart.js configuration object to render. This is the definition of the chart in Javascript or JSON format.
width	integer	Width of image in pixels. Defaults to 500
height	integer	Height of image in pixels. Defaults to 300
devicePixelRatio	integer	Device pixel ratio of output. Set to 1 for normal resolution, 2 for retina. Defaults to 2
backgroundColor	string	RGB, HEX, HSL, or color name. Defaults to transparent
version	string	Chart.js version. Default to 2. Setting to 4 enables latest stable Chart.js v4 support.
format	string	png, webp, svg, or pdf. Defaults to png
encoding	string	url or base64. Defaults to url

info

Learn more about API parameters and the POST endpoint.

Customization

Because QuickChart is built on the open-source Chart.js library, charts are flexible and highly customizable. To learn more, view our examples gallery or see the reference section to learn how to use Chart.js.

Loading...

QR codes

To learn more about generating QR codes, follow this link.

Need help?

If you have questions, please don't hesitate to ask in our community or send us a message.